<!DOCTYPE html>
<html>
<head>
	<title>文字逐帧动画</title>
</head>
<style type="text/css">
	html, body {
		padding: 0;
		margin: 0;
		font-size: 30px;
		height: 100vh;
		width: 100vw;
	}
	.container {
		width: 100%;
		height: 100%;
		background-image: linear-gradient(135deg, #A8E6CF 0%, #FFD3B6 100%);
		padding: 20px;
		box-sizing: border-box
	}
	.container > .content {
		white-space: nowrap;
		overflow: hidden;
		border-right: 1px solid;
		font-family: 'Roboto Slab','Helvetica Neue',Helvetica,'Hiragino Sans GB',Arial,sans-serif;
		animation: typing 2s steps(26, end), blink-caret 1s step-end 3s;
	}
	@keyframes typing {
		from {
		width: 0;
		}
		to {
		width: 320px;
		}
}
</style>
<body>
	<div class="container">
		<div class="content">
			<code>
				<span>H</span>
				<span>E</span>
				<span>L</span>
				<span>L</span>
				<span>O</span>
				<span>,</span>
				<span>W</span>
				<span>O</span>
				<span>L</span>
				<span>D</span>
				<span>!</span>
			</code>
		</div>
	</div>
</body>
</html>